<template>
    <el-row>
    <el-col :span="12">
        <el-tree
        ref="treeRef"
    style="max-width: 600px"
    :props="props"
    default-expand-all
    :data="data1"
    show-checkbox
    node-key="value"
    @check-change="handleCheckChange"
    :default-checked-keys="tableMenu"
  />
    </el-col>
    <el-col :span="12">
        <el-select
        v-model="tableForm.roleId"
        placeholder="请选择角色"
        clearable
        @change="GetFanMenu"
      >
        <el-option v-for="item in GetRoletable" :label="item.name" :value="item.id" />
      </el-select>
    </el-col>
  </el-row>
  <el-button type="primary" @click="AddRoleMune" >添加</el-button>
  <el-button type="primary" @click="UpdateRoleMune" >修改</el-button>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { reactive,ref,onMounted } from 'vue'
import { useRouter } from 'vue-router';
const router=useRouter();
onMounted(() => {
    GetRole();
    GetMenu();
})
const tableForm=reactive({
    roleId:"",
    menuId:[]
})
const GetRoletable=ref([]);
const GetRole=()=>{
    axios({
        method:"get",
        url:"http://1.117.93.87:8000/rbacdu/api/Role/RoleSelectShow"
    })
    .then(res=>{
        GetRoletable.value=res.data.data
    })
}

const props = {
  label: 'label',
  children: 'children',
  id:'value'
}
const handleCheckChange = (data: any,checked: any) => {
  
  if(checked){
    tableForm.menuId.push(data.value);
  }
  else{
    tableForm.menuId =tableForm.menuId.filter(x=>x!==data.value)
  }
  
}
const GetNenuTable=ref([])
const GetMenu=()=>{
    axios({
        method:"get",
        url:"http://1.117.93.87:8000/rbacdu/api/Menu/MenuTreeShow"
    })
    .then(res=>{
        GetNenuTable.value=res.data.data
        console.log(GetNenuTable.value)
    })
}
const data1=[
  {
    label: '权限菜单',
    children: GetNenuTable,
  }
]
const AddRoleMune=()=>{
    console.log(tableForm)
    console.log(tableForm.menuId)
    axios({
        method:"post",
        url:"http://1.117.93.87:8000/rbacxie/api/Menu/RoleMenu",
        data:tableForm
    })
    .then(res=>{
        if(res.data.code==200){
            ElMessage.success("添加成功")
            router.push("/RoleMenuList")
        }
    })
}
const tableMenu=ref([]);
const GetFanMenu=()=>{
  console.log(tableForm.roleId)
  axios({
    method:"get",
    url:"http://1.117.93.87:8000/rbacdu/api/RoleMenuFun/RoleMenuFunByRoleId",
    params:{
      roleId:tableForm.roleId
    }
  })
  .then(res=>{
    tableMenu.value=res.data.data
    console.log(res.data.data)
  })
}
const UpdateRoleMune=()=>{
  console.log(tableForm)
 axios({
  method:"put",
  url:"http://1.117.93.87:8000/rbacxie/api/Menu/RoleMenuUpdate",
  data:tableForm
 })
 .then(res=>{
   if(res.data.code==200){
    ElMessage.success("权限已更改")
    router.push("/RoleMenuList")
   }
   else{
    ElMessage.error("权限修改失败")
   }
 })
}
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
